<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <title>用户中心</title>
    <link rel="stylesheet" href="css/nxyt.css" type="text/css"/>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link title="" href="css/style1.css" rel="stylesheet" type="text/css"  />
    <link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css"/>
    <link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled"/>
    <link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled"/>
    <link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="css/daterangepicker-bs3.css" />


    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.4/index.js"></script>
    <script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="script/jquery.cookie.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="script/echarts.min.js"></script>
    <script src="script/china.js"></script>
    <script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.4/index.js"></script>
    <script type="text/javascript" src="script/moment.min.js"></script>
    <script type="text/javascript" src="script/daterangepicker.js"></script>

</head>

<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <ul class="navbar-brand">
            <li>
                <img  style="margin-right: 10px" src="img/logo.png" alt="">
                <span style="color:white;">农险云图业务管理系统</span>
            </li>
        </ul>

    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown li-border"><a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown"><img  style="border-radius: 80px;width: 20px;height: 20px;margin-right: 5px" src="img/avatar3.jpg" alt="">3645621@qq.com<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">退出</a></li>
                </ul>
            </li>
            <li class="dropdown"><a href="#" style="height: 51px" class="dropdown-toggle mystyle-color" data-toggle="dropdown">换肤<span class="caret"></span></a>
                <ul class="dropdown-menu changecolor">
                    <li id="blue"><a href="#">绿色</a></li>
                    <li class="divider"></li>
                    <li id="green"><a href="#">蓝色</a></li>
                    <li class="divider"></li>
                    <li id="orange"><a href="#">橙色</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<div class="down-main">
    <div class="left-main left-full">
        <div class="sidebar-fold"><span class="glyphicon glyphicon-menu-hamburger"></span></div>
        <div class="subNavBox">

            <div class="sBox">
                <div class="subNav sublist-up"><span class="title-icon glyphicon glyphicon-chevron-down"></span><span class="sublist-title">数据分析</span></div>
                <ul class="navContent" style="display:block">
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />汇总分析</div>
                        <a href="index.html"><span class="sublist-icon glyphicon glyphicon-asterisk"></span><span class="sub-title">汇总分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />用户分析</div>
                        <a href="user_analysis.html"><span class="sublist-icon glyphicon glyphicon-indent-right"></span><span class="sub-title">用户分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />留存分析</div>
                        <a href="user_retention_analysis.html"><span class="sublist-icon glyphicon glyphicon-print"></span><span class="sub-title">留存分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />业务分析</div>
                        <a href="business_analysis.html"><span class="sublist-icon glyphicon glyphicon-road glyphicon glyphicon-user"></span><span class="sub-title">业务分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />清单分析-种植</div>
                        <a href="Detailed_list_analysis_zhong.html"><span class="sublist-icon glyphicon glyphicon-tasks"></span><span class="sub-title">清单分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />清单分析-养殖</div>
                        <a href="Detailed_list_analysis_yang.html"><span class="sublist-icon glyphicon glyphicon-send"></span><span class="sub-title">清单分析</span></a></li>
                    <li>
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />地图分析</div>
                        <a href="map_analysis.html"><span class="sublist-icon glyphicon glyphicon-th"></span><span class="sub-title">地图分析</span></a></li>
                    <li class="active">
                        <div class="showtitle" style="width:100px;"><img src="img/leftimg.png" />影像分析</div>
                        <a href="image_analysis.html"><span class="sublist-icon glyphicon glyphicon-magnet"></span><span class="sub-title">影像分析</span></a></li>

                </ul>
            </div>
        </div>
    </div>
    <div class="right-product my-index right-full">
        <div class="container-fluid" id="container-fluid">
        <ol class="breadcrumb">
                      <li><a href="#">运营管理系统</a></li>
                      <li class="active">影像分析</li>
                </ol>
            <div class="content-top user-content">
                <div class="toolbar">
                        <button class="export-btn">
                        导出PDF
                       </button>
                       <div class="search">
                           <input class="search-item" type="text" placeholder="请输入关键字"/>&nbsp;&nbsp;<button>搜索</button>
                       </div>
                    </div>
                <div class="user-date">
                    <ul>
                        <span>日期：</span>&nbsp;&nbsp;
                        <input type="text" readonly style="width: 200px;border-radius: 5px;border: 1px solid lightseagreen " name="reservation" id="reservation" placeholder="请输入日期范围" />

                    </ul>
                </div>
                <div class="user-company" id="business-company">
                    <span>企业：</span>
                    <button class="business-company-btn" onclick="select_item('business-company','.check7')">+多选</button>
                    <ul>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                        <li><input class="check7" type="checkbox" name="check" value="中煤"/><span class="com-span">中煤保险&nbsp;<img src="img/index/u17.png" alt=""/></span> </li>
                    </ul>
                    <button onclick="chk()" class="btn2" style="color: #ffffff">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="reset1" onclick="reset('business-company','.check7')" class="btn2" style="color: #000000;background: #dcdcdc">取消</button>
                </div>
                <div class="user-province" id="business-province">
                    <span>省份：</span>
                    <button class="business-province-btn" onclick="select_item('business-province','.check8')">+多选</button>
                    <ul>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check8"  name="check" type="checkbox" value="北京"/><span class="pro-span">北京&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                    </ul>
                    <button onclick="chk()" class="btn2" style="color: #ffffff">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="reset2" onclick="reset('business-province','.check8')" class="btn2" style="color: #000000;background: #dcdcdc">取消</button>
                </div>
                <div class="business-business" id="business-business">
                    <span>业务：</span>
                    <button class="business-business-btn" onclick="select_item('business-business','.check9')">+多选</button>
                    <ul>
                        <li><input class="check9" type="checkbox"/><span class="buss-span">承保&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check9" type="checkbox"/><span class="buss-span">承保&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                    </ul>
                    <button onclick="chk()" class="btn2" style="color: #ffffff">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="reset3" onclick="reset('business-business','.check9')" class="btn2" style="color: #000000;background: #dcdcdc">取消</button>
                </div>
                <div class="business-insurance" id="business-insurance">
                    <span>险种：</span>
                    <button class="business-insurance-btn" onclick="select_item('business-insurance','.check10')">+多选</button>
                    <ul>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                        <li><input class="check10" name="check" type="checkbox" value="种植"/><span class="in-span">种植&nbsp;<img src="img/index/u17.png" alt=""/></span></li>
                    </ul>
                    <button onclick="chk()" class="btn2" style="color: #ffffff">确定</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="reset4" onclick="reset('business-insurance','.check10')" class="btn2" style="color: #000000;background: #dcdcdc">取消</button>
                </div>
            </div>
            <div class="business-content-bottom">
                <div id="c1"></div>
                <div class="table">
                    <table style="border:1px red;"  cellpadding="10" width="1000px">
                        <tr>
                            <th style="text-align: center;">统计日期</th>
                            <th style="text-align: center;">任务总数</th>
                            <th style="text-align: center;">照片数量</th>
                            <th style="text-align: center;">照片数/任务数</th>
                            <th style="text-align: center;">照片完整度</th>
                        </tr>
                        <tr v-cloak v-for="number in test">
                            <td>{{number.date}}</td>
                            <td>{{number.total_tasks}}</td>
                            <td>{{number.photo_number}}</td>
                            <td>{{number.photo_tasks_number}}</td>
                            <td>{{number.photo_integrity}}</td>
                        </tr>

                    </table>
                    <div class="business-pagination">
                        <div id="setpage"></div>
                    </div>

                </div>
                <div class="map">
                    <div class="circular-image">
                        <div id="user-com" style="width: 400px;height:400px;"></div>
                        <span>影像数量企业布图</span>
                    </div>
                    <div class="user-map">
                        <div id="c3"></div>
                    </div>
                    <div class="count">
                        <div id="c5" style="width: 500px;height: 500px;"></div>
                        <span>影像数量险类分布图</span>
                    </div>
                    <div class="task-count">
                        <div id="main" style="width: 400px;height:400px;"></div>
                    </div>
                    <table class="img-map-table" style="width: 300px;border: 0;" cellpadding="10" width="10px">
                        <tr>
                            <td>1</td>
                            <td>山西</td>
                            <td>35945555</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>北京</td>
                            <td>3594</td>
                            <td>58.7%</td>
                        </tr>
                    </table>
                    <div class="img-map-span">
                        <span>影像数量地域分布图</span>
                    </div>
                    <div class="tasks_total">
                        <div id="c6" style="width: 500px;height:460px;"></div>
                        <span>任务总数分布图</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
    <!--   //分页的js
    var totalpage,pagesize,cpage,count,curcount,outstr;
    //初始化
    cpage = 1;
    totalpage = 50;
    pagesize = 10;
    outstr = "";
    function gotopage(target)
    {
        cpage = target;        //把页面计数定位到第几页
        setpage();
        //reloadpage(target);    //调用显示页面函数显示第几页,这个功能是用在页面内容用ajax载入的情况
    }
    function setpage()
    {
        if(totalpage<=10){        //总页数小于十页
            for (count=1;count<=totalpage;count++)
            {    if(count!=cpage)
            {
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
            }else{
                outstr = outstr + "<span class='current' >"+count+"</span>";
            }
            }
        }
        if(totalpage>10){        //总页数大于十页
            if(parseInt((cpage-1)/10) == 0)
            {
                for (count=1;count<=10;count++)
                {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
                }
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
            }
            else if(parseInt((cpage-1)/10) == parseInt(totalpage/10))
            {
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
                for (count=parseInt(totalpage/10)*10+1;count<=totalpage;count++)
                {    if(count!=cpage)
                {
                    outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                }else{
                    outstr = outstr + "<span class='current'>"+count+"</span>";
                }
                }
            }
            else
            {
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/10)*10)+")'>previous</a>";
                for (count=parseInt((cpage-1)/10)*10+1;count<=parseInt((cpage-1)/10)*10+10;count++)
                {
                    if(count!=cpage)
                    {
                        outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>";
                    }else{
                        outstr = outstr + "<span class='current'>"+count+"</span>";
                    }
                }
                outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> next </a>";
            }
        }
        document.getElementById("setpage").innerHTML = "<div id='setpage'><span id='info'>共"+totalpage+"页|第"+cpage+"页<\/span>" + outstr + "<\/div>";
        outstr = "";
    }
    setpage();    //调用分页
    //-->
</script>
<script>
    new Vue({
        el: '.table',
        data: {
            test: [
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'},
                {date:'2017-06-02',total_tasks:'7815',photo_number:'16485',photo_tasks_number:'7841',photo_integrity:'5000'}
            ]
        }
    })
</script>
<script type="text/javascript">
    //多选
    $("li").click(function () {
        $(this).toggleClass("selected1");
        if ($(this).hasClass("selected1")) {
            var img = $(this).children("span").children("img");
            img.css('display', 'inline');
        } else {
            var img = $(this).children("span").children("img");
            img.css('display', 'none');
        }
    });
    //企业下拉
    document.getElementById("business-company").style.height = '30px';
    document.getElementById("business-province").style.height = '30px';
    document.getElementById("business-business").style.height = '30px';
    document.getElementById("business-insurance").style.height = '30px';
    function select_item(x,y) {
        var btn1 = document.getElementById(x);
        if (btn1.style.height == '30px') {
            btn1.style.height = 'auto';
            btn1.style.overflow = 'visible';
            btn1.style.border = '1px solid #dcdcdc'
        } else {
            btn1.style.height = '30px';
            btn1.style.overflow = 'hidden';
            btn1.style.border = 'none';
        }
        if ($(y).hasClass("display2")) {
            $(y).removeClass("display2");
        } else {
            $(y).addClass("display2");
        }
    }
    //获取checkbox的值
    function chk() {
        var obj = document.getElementsByName('check'); //选择所有name="'check'"的对象，返回数组,取到对象数组后，我们来循环检测它是不是被选中
        var s = '';
        for (var i = 0; i < obj.length; i++) {
            if (obj[i].checked) s += obj[i].value + ','; //如果选中，将value添加到变量s中
        }
        console.log(s);
    }
    //取消-企业
    function reset(x,y) {
        var btn2 = document.getElementById(x);
        btn2.style.height = '30px';
        btn2.style.overflow = 'hidden';
        btn2.style.border = 'none';
        $(y).removeClass("display2");
    }
    $(function(){
        /*换肤*/
        $(".dropdown .changecolor li").click(function(){
            var style = $(this).attr("id");
            $("link[title!='']").attr("disabled","disabled");
            $("link[title='"+style+"']").removeAttr("disabled");

            $.cookie('mystyle', style, { expires: 7 }); // 存储一个带7天期限的 cookie
        })
        var cookie_style = $.cookie("mystyle");
        if(cookie_style!=null){
            $("link[title!='']").attr("disabled","disabled");
            $("link[title='"+cookie_style+"']").removeAttr("disabled");
        }


        /*左侧导航栏显示隐藏功能*/
        $(".subNav").click(function(){
            /*显示*/
            if($(this).find("span:first-child").attr('class')=="title-icon glyphicon glyphicon-chevron-down")
            {
                $(this).find("span:first-child").removeClass("glyphicon-chevron-down");
                $(this).find("span:first-child").addClass("glyphicon-chevron-up");
                $(this).removeClass("sublist-down");
                $(this).addClass("sublist-up");
            }
            /*隐藏*/
            else
            {
                $(this).find("span:first-child").removeClass("glyphicon-chevron-up");
                $(this).find("span:first-child").addClass("glyphicon-chevron-down");
                $(this).removeClass("sublist-up");
                $(this).addClass("sublist-down");
            }
            // 修改数字控制速度， slideUp(500)控制卷起速度
            $(this).next(".navContent").slideToggle(300).siblings(".navContent").slideUp(300);
        })
        /*左侧导航栏缩进功能*/
        $(".left-main .sidebar-fold").click(function(){

            if($(this).parent().attr('class')=="left-main left-full")
            {
                $(this).parent().removeClass("left-full");
                $(this).parent().addClass("left-off");

                $(this).parent().parent().find(".right-product").removeClass("right-full");
                $(this).parent().parent().find(".right-product").addClass("right-off");

            }
            else
            {
                $(this).parent().removeClass("left-off");
                $(this).parent().addClass("left-full");

                $(this).parent().parent().find(".right-product").removeClass("right-off");
                $(this).parent().parent().find(".right-product").addClass("right-full");

            }
        });

        /*左侧鼠标移入提示功能*/
        $(".sBox ul li").mouseenter(function(){
            if($(this).find("span:last-child").css("display")=="none")
            {$(this).find("div").show();}
        }).mouseleave(function(){$(this).find("div").hide();})
    })

</script>
<script>
    var data = [
        {"month":0,"tem":7,"city":"新增任务"},
        {"month":1,"tem":55,"city":"新增任务"},
        {"month":2,"tem":100,"city":"新增任务"},
        {"month":3,"tem":300,"city":"新增任务"},
        {"month":4,"tem":18.2,"city":"新增任务"},
        {"month":5,"tem":21.5,"city":"新增任务"},
        {"month":6,"tem":25.2,"city":"新增任务"},
        {"month":7,"tem":26.5,"city":"新增任务"},
        {"month":8,"tem":23.3,"city":"新增任务"},
        {"month":9,"tem":18.3,"city":"新增任务"},
        {"month":10,"tem":13.9,"city":"新增任务"},
        {"month":11,"tem":9.6,"city":"新增任务"},
        {"month":0,"tem":-0.2,"city":"采集中"},
        {"month":1,"tem":0.8,"city":"采集中"},
        {"month":2,"tem":5.7,"city":"采集中"},
        {"month":3,"tem":11.3,"city":"采集中"},
        {"month":4,"tem":17,"city":"采集中"},
        {"month":5,"tem":22,"city":"采集中"},
        {"month":6,"tem":24.8,"city":"采集中"},
        {"month":7,"tem":24.1,"city":"采集中"},
        {"month":8,"tem":20.1,"city":"采集中"},
        {"month":9,"tem":14.1,"city":"采集中"},
        {"month":10,"tem":8.6,"city":"采集中"},
        {"month":11,"tem":2.5,"city":"采集中"},
        {"month":0,"tem":-0.9,"city":"采集完"},
        {"month":1,"tem":0.6,"city":"采集完"},
        {"month":2,"tem":3.5,"city":"采集完"},
        {"month":3,"tem":8.4,"city":"采集完"},
        {"month":4,"tem":13.5,"city":"采集完"},
        {"month":5,"tem":17,"city":"采集完"},
        {"month":6,"tem":18.6,"city":"采集完"},
        {"month":7,"tem":17.9,"city":"采集完"},
        {"month":8,"tem":14.3,"city":"采集完"},
        {"month":9,"tem":9,"city":"采集完"},
        {"month":10,"tem":3.9,"city":"采集完"},
        {"month":11,"tem":1,"city":"采集完"}
    ];
    var chart = new G2.Chart({
        id: 'c1',
        forceFit: true,
        height: 450
    });
    var defs = {'month':{
        type: 'cat',
        values: [
            '一月','二月','三月','四月','五月','六月',
            '七月','八月','九月','十月','十一月','十二月']
    }};
    chart.source(data,defs);
    chart.tooltip(true, {
        custom: true, // 使用自定义的 tooltip
        offset: 50
    });
    chart.line().position('month*tem').color('city');
    chart.render();
</script>
<script>
    var myChart = echarts.init(document.getElementById('user-com'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('c5'));
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直达', selected:true},
                    {value:679, name:'营销广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            },
            {
                name:'访问来源',
                type:'pie',
                radius: ['40%', '55%'],

                data:[
                    {value:335, name:'直达'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1048, name:'百度'},
                    {value:251, name:'谷歌'},
                    {value:147, name:'必应'},
                    {value:102, name:'其他'}
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
<script>
    var myChart = echarts.init(document.getElementById('c6'));
    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#reservation').daterangepicker(null, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
        });
    });
</script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    function randomData() {
        return Math.round(Math.random()*1000);
    }
    option = {

        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:['iphone3','iphone4','iphone5']
        },
        visualMap: {
            min: 0,
            max: 2500,
            left: 'left',
            top: 'bottom',
            text: ['高','低'],           // 文本，默认为数值文本
            calculable: true
        },
        series: [
            {
                name: 'iphone3',
                type: 'map',
                mapType: 'china',
                roam: false,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {name: '北京',value: randomData() },
                    {name: '天津',value: randomData() },
                    {name: '上海',value: randomData() },
                    {name: '重庆',value: randomData() },
                    {name: '河北',value: randomData() },
                    {name: '河南',value: randomData() },
                    {name: '云南',value: randomData() },
                    {name: '辽宁',value: randomData() },
                    {name: '黑龙江',value: randomData() },
                    {name: '湖南',value: randomData() },
                    {name: '安徽',value: randomData() },
                    {name: '山东',value: randomData() },
                    {name: '新疆',value: randomData() },
                    {name: '江苏',value: randomData() },
                    {name: '浙江',value: randomData() },
                    {name: '江西',value: randomData() },
                    {name: '湖北',value: randomData() },
                    {name: '广西',value: randomData() },
                    {name: '甘肃',value: randomData() },
                    {name: '山西',value: randomData() },
                    {name: '内蒙古',value: randomData() },
                    {name: '陕西',value: randomData() },
                    {name: '吉林',value: randomData() },
                    {name: '福建',value: randomData() },
                    {name: '贵州',value: randomData() },
                    {name: '广东',value: randomData() },
                    {name: '青海',value: randomData() },
                    {name: '西藏',value: randomData() },
                    {name: '四川',value: randomData() },
                    {name: '宁夏',value: randomData() },
                    {name: '海南',value: randomData() },
                    {name: '台湾',value: randomData() },
                    {name: '香港',value: randomData() },
                    {name: '澳门',value: randomData() }
                ]
            },
            {
                name: 'iphone4',
                type: 'map',
                mapType: 'china',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {name: '北京',value: randomData() },
                    {name: '天津',value: randomData() },
                    {name: '上海',value: randomData() },
                    {name: '重庆',value: randomData() },
                    {name: '河北',value: randomData() },
                    {name: '安徽',value: randomData() },
                    {name: '新疆',value: randomData() },
                    {name: '浙江',value: randomData() },
                    {name: '江西',value: randomData() },
                    {name: '山西',value: randomData() },
                    {name: '内蒙古',value: randomData() },
                    {name: '吉林',value: randomData() },
                    {name: '福建',value: randomData() },
                    {name: '广东',value: randomData() },
                    {name: '西藏',value: randomData() },
                    {name: '四川',value: randomData() },
                    {name: '宁夏',value: randomData() },
                    {name: '香港',value: randomData() },
                    {name: '澳门',value: randomData() }
                ]
            },
            {
                name: 'iphone5',
                type: 'map',
                mapType: 'china',
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        show: true
                    }
                },
                data:[
                    {name: '北京',value: randomData() },
                    {name: '天津',value: randomData() },
                    {name: '上海',value: randomData() },
                    {name: '广东',value: randomData() },
                    {name: '台湾',value: randomData() },
                    {name: '香港',value: randomData() },
                    {name: '澳门',value: randomData() }
                ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>
